﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <style type="text/css">
        .popover { min-width: 150px; }
        .error { border: 1px red dashed; }
        label.error { border: none; color: red; position: absolute; top: 8px; right: 25px; }
    </style>
</head>
<body>
    <div class="container" style="padding-top: 50px;">

        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">


                <div class="panel panel-default">
                    <div class="panel-body">
                        <form id="form1" method="get" class="form-horizontal">

                            <div class="form-group">
                                <label for="userName" class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名" data-toggle="tooltip" data-placement="top" title="请输入8 ~ 16位的用户名！">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="pwd" class="col-sm-3 control-label">密码：</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="twopwd" class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="twopwd" name="twopwd" placeholder="请再次输入密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email" class="col-sm-3 control-label">邮箱：</label>
                                <div class="col-sm-8">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="mobile" class="col-sm-3 control-label">手机号：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="zipCode" class="col-sm-3 control-label">邮编：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="zipCode" name="zipCode" placeholder="请输入邮政编号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="info" class="col-sm-3 control-label">简介：</label>
                                <div class="col-sm-8">
                                    <span class="glyphicon glyphicon-exclamation-sign" style="position: absolute; right: 0; top: -5px;" data-toggle="popover" data-placement="right" title="输入您的简介" data-content="个人简介示例： 1、基础体力500，基础法力200 2、一个完美的战士"></span>
                                    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" style="width: 600px;" type="text/plain">
        这里写你的初始化内容
    </script>
                                    <!-- <textarea class="form-control" id="info" name="info" style="max-width: 431px; height: 150px; max-height: 150px;"></textarea> -->

                                </div>
                            </div>

                            <div class="form-group">

                                <div class="col-sm-8 col-sm-offset-2" style="text-align: right;">
                                    <button class="btn btn-default" id="btn">提交</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>


        
    </div>


    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/messages_zh.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();



            jQuery.validator.addMethod('abc',function(v,e){
                return v=="abc";
            },"不满足abc相等");

            $("#form1").validate({
                rules:{
                    userName:{
                        required:true,
                        abc:true
                    }
                },
                messages:{
                    userName:{
                        required:'用户必须填写'
                    }
                }

            });

/*
            // 邮政编码验证
            jQuery.validator.addMethod("isZipCode", function (value, element) {
                var tel = /^[0-9]{6}$/;
                return this.optional(element) || (tel.test(value));
            }, "请正确填写您的邮政编码");
*/





        });

    </script>

    <link href="themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    
    <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script>
    <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        var um = UM.getEditor('container');
    </script>



</body>
</html>